<template>
  <div>
           <h4>欢迎光临_vue开发的收银系统_水果店</h4>

      <table>
      <tr>
          <th>苹果{{ping}}￥/斤，折扣{{zhe}}折</th>
          </tr>
          <tr>
<th><span>请输入你要购买斤数</span><input type="text" v-model.number="bianliang"></th>
          </tr>
          <tr>
<th><button @click="btn">结账买单</button></th>
          </tr>
          <tr>
   <th><p>结账单:总价:{{zong}}￥元，折后价:{{discount}}￥元 省了:{{reflect}}￥元</p></th>
          </tr>
      </table>
  </div>
     
</template>

<script>
export default {
data (){
    return {
        ping:'10',
        zhe:'8',
bianliang:'',
zong:'',
discount:''

    }
},methods: {
    btn(){
        this.zong = this.bianliang * this.ping
        this.discount = this.zong * (this.zhe % 10)
        this.reflect = this.zong - this.discount
    }
}
}
</script>

<style>
div{
    text-align: center;
    margin: 100px auto;
    width: 700px;
}
td,th{
    border: solid 1px #000;
}
table{
    width: 100%;
    text-align: center;
    border:solid 1px pink
}
</style>